ajax({
    url: "http://chst.vip:1902/students/getstulist"
}).then(res => {
    // console.log(res);
    let resArr = res.data;
    console.log(resArr);
    let content = document.querySelector('#content')
    // console.log(content);
    let html = '';
    resArr.forEach(item => {
        html += `<div class="tip1" id="${item.id}">
        <div class="tip_h" title="双击关闭纸条">
            <div class="num">第[49]条 2022-02-17 22:51:52</div>
            <div class="close" title="关闭纸条">×</div>
            <div class="clr"></div>
        </div>
        <div class="tip_c">
        ${item.content}
        </div>
        <div class="tip_f">
            <div class="icon">
                <img src="images/bpic_1.gif" alt="" title="">
            </div>
            <div class="name">${item.name}</div>
            <div class="clr"></div>
        </div>
    </div>`
    });
    content.innerHTML = html;


    let tips = document.querySelectorAll(".tip1");
    let closeArr = document.querySelectorAll(".close");
    let headers = document.querySelectorAll(".tip_h");
    let count = document.querySelector("#count");
    html2 = `<b>评论:${resArr.length}</b>`;
    count.innerHTML = html2;




    let z = 10;
    // console.log(tips);
    for (let i = 0; i < tips.length; i++) {
        //随机生成位置
        let left = Math.random() * (content.offsetWidth - tips[i].offsetWidth)
        let top = Math.random() * (content.offsetHeight - tips[i].offsetHeight)

        tips[i].style.left = left + 'px';
        tips[i].style.top = top + 'px';
        //X点击关闭小纸条
        closeArr[i].onclick = function () {
            // console.log(this);
            // console.log(this.parentNode.parentNode);
            //删除时给用户提示确认
            let del = confirm('您确定要删除嘛？');
            if (del) {
                let id = this.parentNode.parentNode.getAttribute('id');
                // console.log(id);
                ajax({
                    url: "http://chst.vip:1902/students/del",
                    data: { id: id }
                }).then(res => {

                    if (res.state == true) {
                        //提示删除成功
                        alert('已清除数据');
                        // console.log(this);
                        this.parentNode.parentNode.style.display = 'none';
                        location.reload();
                    } else {
                        //提示删除失败,不更新视图
                        alert(`${res.msg}`);
                    }

                })
            } else {
                //提示已撤销删除
                alert('已清除删除');
            }

        }
        //双击头部删除
        headers[i].ondblclick = function () {
            //删除时给用户提示确认
            let del = confirm('您确定要删除嘛？');
            if (del) {
                let id2 = this.parentNode.getAttribute('id');
                // console.log(id);
                ajax({
                    url: "http://chst.vip:1902/students/del",
                    data: { id: id2 }
                }).then(res => {
                    if (res.state == true) {
                        //提示删除成功
                        alert('已清除数据');

                        // console.log(this);
                        this.parentNode.style.display = 'none';
                        location.reload();
                    } else {
                        //提示删除失败,不更新视图
                        alert(`${res.msg}`);
                    }
                })
            } else {
                //提示已撤销删除
                alert('已清除删除');
            }
        }
        //鼠标按下让小纸条显示在最上层
        tips[i].onclick = function () {
            this.style.zIndex = z;
            z++;
            // console.log(z);
        }

        //拖拽便签实现移动
        headers[i].onmousedown = function () {
            //鼠标按下让小纸条显示在最上层
            tips[i].style.zIndex = z;
            z++;
            // console.log(z);
            document.onmousemove = function (e) {
                console.log(e);
                let clientX = e.clientX;
                let clientY = e.clientY;
                console.log(clientX);
                console.log(clientY);
                let moveX = clientX - content.offsetLeft - headers[i].offsetWidth / 2;
                let moveY = clientY - content.offsetTop - headers[i].offsetHeight / 2;
                //便签的移动边界的限制
                if (moveX < 0) {
                    moveX = 0;
                } else if (moveX > content.offsetWidth - headers[i].offsetWidth) {
                    moveX = content.offsetWidth - headers[i].offsetWidth + 'px';
                }
                if (moveY < 0) {
                    moveY = 0;
                } else if (moveY > content.offsetHeight - tips[i].offsetHeight) {
                    moveY = content.offsetHeight - tips[i].offsetHeight + 'px';
                }

                tips[i].style.left = moveX + 'px';
                tips[i].style.top = moveY + 'px';

                // console.log(moveX);
                // console.log(moveY);
                document.onmouseup = function (e) {
                    document.onmousemove = 'none';
                }
            }

        }

    }
    let area = document.querySelector("textarea");
    let btn = document.querySelector("#submit");


    area.oninput = function () {

        if (!this.value) {
            btn.style.background = 'grey';
            btn.disabled = true;
        } else {
            btn.style.background = 'deeppink';
            btn.disabled = false;
        }
        btn.onclick = function () {
            // console.log(area.value);
            let name = prompt('请输入您的名字');
            if(!name){
                alert('已取消评论');
                area.value = '';
            }else{
                ajax({
                    url: "http://chst.vip:1902/students/addlist",
                    method: 'post',
                    data: { content: area.value, name: name }
                }).then(res => {
                    console.log(res);
                    if (res.state == true) {
                        //提示评论成功
                        alert('评论成功');
                        area.value = '';
                        location.reload();
                    } else {
                        //提示评论失败
                        alert('评论失败');
                    }
                })
            }
            
        }

        document.onkeydown = function (e) {
            //按下回车键可以评论
            if (e.keyCode == 13) {
                let name = prompt('请输入您的名字');
                if(!name){
                    alert('已取消评论');
                    area.value = '';
                }else{
                    ajax({
                        url: "http://chst.vip:1902/students/addlist",
                        method: 'post',
                        data: { content: area.value, name: name }
                    }).then(res => {
                        console.log(res);
                        if (res.state == true) {
                            //提示评论成功
                            alert('评论成功');
                            area.value = '';
                            location.reload();
                        } else {
                            //提示评论失败
                            alert('评论失败');
                        }
                    })
                }
                
            }
        }

    }

})

